<template>
    <div class="process-warp">
        <div class="process-info">
            <h2>Order schedule</h2>
            <ul>
                <li v-for="(item, index) in schedule" :key="index" :error="item.order_state == 15 ? 'error' : ''">
                    <OrderState :info="item" />
                    <span v-text="item.time"></span>
                    <!-- <em v-show="item.order_state == 15" v-text="item.remark"></em> -->
                </li>
            </ul>
        </div>

        <div class="process-express">
            <h2>Shipping</h2>
            <div class="process-express-info" v-if="info.logistics.ref_no && lastOrderState > 6 && lastOrderState < 12">
                <p>
                    <span>Logistics company name:</span>
                    <strong v-text="info.logistics.carrier"></strong>
                </p>
                <a target="_blank" :href="trackingLink">
                    <span>Tracking number:</span>
                    <strong v-text="info.logistics.ref_no"></strong>
                </a>
            </div>

            <div v-else class="process-express-empty">
                <img src="@/assets/images/order/dialog-shipping-empty.png" alt="">
                <span>No logistics information</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "OrderProcess",
    props: ["info"],
    computed: {
        schedule () {
            const info = this.info || {}
            const state = info.state || {};
            const log_state = state.log_state || [];

            // 4、8、13、14不显示
            const disabled = [4, 8, 13, 14];

            // let status = {
            //     1: "Creation", // 未支付（可转为：11已取消、13待操作、14待操作）
            //     2: "Payment", // 已支付（可转为：12退款订单、15问题订单）
            //     3: "In production", // 已生成工单（状态显示为正在生产；可转为：12退款订单、15问题订单）
            //     // '4':'In production',  // 正在生产
            //     5: "Produced", // 生产完成
            //     6: "Qualified", // 质检合格
            //     7: "In transit", // 已贴运单（状态显示为已发货）
            //     // '8':'In transit',  // 物流已揽收（状态显示为已发货）
            //     9: 'Delivered',  // 运输中（状态显示为已发货）
            //     10: "Complete", // 已完成
            //     11: "Cancelled", // 已取消
            //     12: "Refunded", // 已退款
            //     // '13':'Unsynced',  // 待操作-同步商品(未支付状态)
            //     // '14':'Wrong adress',  // 待操作-地址不可到达(未支付状态)
            //     15: "Suspended", // 问题订单
            // };

            const result = log_state.map((item) => {
                return {
                    order_state: item.order_state,
                    remark: item.remark,
                    time: this.$timeFormat(item.state_time),
                };
            });

            return result.filter(i => disabled.indexOf(i.order_state) < 0);

        },
        lastOrderState () {
            let list = this.schedule;
            let length = list.length;
            let order_state = (list[length - 1] || {}).order_state || 0;
            if (order_state == 15) {
                order_state = (list[length - 2] || {}).order_state || 0;
            }
            return order_state;
        },
        trackingLink () {

            if (/cne/gi.test(this.info.logistics.carrier)) {
                return 'https://www.cne.com/English/?no=' + this.info.logistics.ref_no
            } else {
                return 'https://t.17track.net/en#nums=' + this.info.logistics.ref_no
            }

        }
    },

};
</script>
<style lang="scss" scoped>
.process-warp {
    display: flex;
    h3 {
        border-bottom: 1px solid #dcdcdc;
        line-height: 42px;
        padding: 0 16px;
        height: 41px;
        font-size: 16px;
        color: #000000;
    }
}

.process-info,
.process-express {
    position: relative;
    padding: 40px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;

    & > h2 {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: flex;
        align-items: center;
        height: 40px;
        border-bottom: 1px solid #e6e6e6;
        line-height: 40px;
        padding: 0 12px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
    }
}

.process-info {
    flex: 432;
    ul {
        flex: 1;
        padding: 12px 8px;
    }

    li {
        display: flex;
        align-items: center;
        height: 32px;
        position: relative;
        border-radius: 6px;
        padding: 0 8px;

        & + li {
            margin-top: 4px;
        }
        &:nth-child(2n) {
            background-color: #f8f8f8;
        }
        &:before {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 4px;
            background: #000;
            margin-right: 10px;
        }

        & > .order-name {
            flex: 1;
            justify-content: flex-start;
            background: none;

            &::v-deep {
                span {
                    font-size: 16px;
                    font-family: Roboto-Regular, Roboto;
                    font-weight: 400;
                    color: #000000;
                }
                svg {
                    display: none;
                }

                &[state='1'] {
                    &::before {
                        content: 'Created';
                        font-size: 16px;
                        font-family: Roboto-Regular, Roboto;
                        font-weight: 400;
                        color: #000000;
                    }

                    span {
                        display: none;
                    }
                }
            }
        }

        & > span {
            font-size: 16px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555555;
            line-height: 20px;
        }

        // & > em {
        //     width: 100%;
        //     box-sizing: border-box;
        //     padding: 8px 0 8px 10px;
        //     line-height: 24px;
        //     color: #f44336;
        // }

        &[error='error'] {
            &:before {
                background: #c62828;
            }
            & > .order-name::v-deep span {
                color: #c62828;
            }
            & > span {
                color: #c62828;
            }
        }
    }
}

.process-express {
    flex: 348;
    margin-left: 12px;
    display: flex;
    flex-direction: column;

    .process-express-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 12px 0;

        p {
            display: flex;
            flex-direction: column;
            margin: 0 12px;
            span {
                font-size: 16px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #555555;
                line-height: 22px;
            }
            strong {
                margin-top: 8px;
                font-size: 16px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #000000;
                line-height: 22px;
            }
        }

        a {
            margin: 10px 8px;
            display: flex;
            flex-direction: column;

            border-radius: 8px;
            cursor: pointer;
            padding: 8px 4px;

            span {
                font-size: 16px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #555555;
                line-height: 22px;
                &::after {
                    content: '';
                    display: inline-block;
                    vertical-align: top;
                    width: 22px;
                    height: 22px;
                    margin-left: 4px;
                    background-image: url(https://img.podpartner.com/static/images-20230202/express-normal.png);
                    background-size: 100% 100%;
                }
            }

            strong {
                white-space: normal;
                word-break: break-all;
                font-size: 16px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #000000;
                line-height: 22px;
            }

            &:hover {
                background: #f6f6f6;
            }
        }

        span {
            min-height: 22px;
            font-size: 16px;
            color: #666666;
            line-height: 22px;
        }
        strong {
            margin-top: 8px;
            font-size: 24px;

            font-weight: normal;
            color: #000000;
            line-height: 28px;
        }
    }

    .process-express-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 240px;

        img,
        svg {
            width: 60px;
            height: 46px;
        }
        span {
            margin-top: 12px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #757575;
            line-height: 16px;
        }
    }
}
</style>
